<?php
$configKey = isset($configKey) ? $configKey : 'dev-pricing';


// 移动应用开发服务配置 - 仅包含数据
$defaultConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '移动技术',
    'section_title' => '移动开发服务定价',
    'section_subtitle' => '灵活的开发方案满足不同规模项目需求，确保高质量交付',
    'bg_color' => 'gray-50',
    'card_style' => 'modern',
    'highlight_color' => 'blue-600',
    'items' => [
        [
            'id' => 'basic-app',
            'title' => '基础应用包',
            'subtitle' => '适合简单功能的移动应用',
            'price' => 29800,
            'period' => '项目',
            'features' => [
                '单平台开发',
                '5-8个功能模块',
                '基础UI设计',
                '1轮测试优化',
                '应用商店提交',
                '3个月技术支持'
            ],
            'recommended' => false,
            'popularity' => '入门首选'
        ],
        [
            'id' => 'standard-app',
            'title' => '标准应用包',
            'subtitle' => '适合功能完善的商业应用',
            'price' => 68800,
            'period' => '项目',
            'features' => [
                '双平台开发',
                '10-15个功能模块',
                '专业UI/UX设计',
                '完整测试方案',
                '应用商店优化',
                '6个月技术支持',
                '用户行为分析'
            ],
            'recommended' => true,
            'savings' => '节省20%'
        ],
        [
            'id' => 'enterprise-app',
            'title' => '企业定制包',
            'subtitle' => '适合复杂功能与系统集成',
            'price' => 158000,
            'period' => '起',
            'features' => [
                '多平台定制开发',
                '无限功能模块',
                '高级UI/UX设计',
                '性能与安全测试',
                '系统集成服务',
                '1年技术支持',
                '专属开发团队',
                '持续迭代优化'
            ],
            'recommended' => false,
            'popularity' => '企业首选'
        ]
    ],
    'texts' => [
        'select_plan' => '选择此方案',
        'custom_inquiry' => '需要定制化开发服务？',
        'contact_us' => '联系我们',
        'get_custom_plan' => '获取专属方案',
        'learn_more' => '了解更多'
    ],
    'classes' => [
        // section相关样式
        'section_bg_base' => 'py-16',
        'section_container' => 'continer mx-auto px-4 sm:px-6 lg:px-8',
        'section_text_center' => 'text-center mb-16',
        'section_pretitle' => 'inline-block text-sm font-semibold uppercase tracking-wider mb-2',
        'section_title' => 'text-3xl md:text-4xl font-bold text-gray-900 mb-4',
        'section_subtitle' => 'text-lg text-gray-600 max-w-3xl mx-auto',
        'section_grid' => 'grid grid-cols-1 md:grid-cols-3 gap-8',
        'section_custom_inquiry' => 'text-center mt-10',
        'section_inquiry_text' => 'text-gray-600',
        'section_inquiry_link' => 'font-medium transition-colors duration-300 hover:underline',
        
        // 卡片相关样式
        'card_base' => 'p-8 rounded-xl transition-all duration-300 h-full flex flex-col relative',
        'card_modern' => 'shadow-md hover:shadow-xl hover:-translate-y-1 border border-gray-100',
        'card_classic' => 'border border-gray-200',
        'card_minimal' => '',
        'card_title' => 'text-2xl font-bold text-gray-900 mb-1',
        'card_subtitle' => 'text-gray-600 mb-6',
        'card_price' => 'text-4xl font-bold text-gray-900',
        'card_period' => 'text-gray-600 ml-1',
        'card_price_container' => 'mb-6',
        'card_features_list' => 'space-y-3 mb-8',
        'card_feature_item' => 'flex items-start',
        'card_feature_icon' => 'fa fa-check text-green-500 mt-1 mr-3 transition-opacity duration-300',
        'card_feature_text' => 'text-gray-700 transition-opacity duration-300',
        'card_cta_container' => 'mt-auto',
        'card_cta_button' => 'block w-full py-3 px-4 text-white font-medium rounded-lg transition-all duration-300 text-center shadow-md hover:shadow-lg transform hover:scale-[1.02] active:scale-[0.98]',
        'card_cta_learn_more' => 'block text-center text-sm mt-4 transition-colors duration-300 hover:underline',
        
        // 标签相关样式
        'label_recommended' => 'absolute top-0 right-0 text-xs font-bold px-3 py-1 rounded-bl-lg',
        'label_savings' => 'absolute -top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full',
        'label_popularity' => 'absolute top-0 right-0 bg-gray-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg',
        
        // 动画相关样式
        'animation_form_highlight' => 'form-highlight',
        'animation_pricing_card' => 'pricing-card'
    ],
];
$data = array_merge($defaultConfig, $pageConfig['components'][$configKey] ?? []);
// 计算样式类
$bgClass = "bg-{$data['bg_color']}";
$highlightColor = $data['highlight_color'];

// 卡片样式映射
$cardStyleMap = [
    'modern' => $data['classes']['card_modern'],
    'classic' => $data['classes']['card_classic'] . " hover:border-{$highlightColor}",
    'minimal' => $data['classes']['card_minimal']
];

// 组合基础卡片样式和选中的卡片样式
$cardClass = $data['classes']['card_base'] . ' ' . ($cardStyleMap[$data['card_style']] ?? $cardStyleMap['modern']);
?>

<!-- 开发服务定价 -->
<section id="<?php echo htmlspecialchars($data['section_id']); ?>" class="<?php echo $bgClass; ?> <?php echo $data['classes']['section_bg_base']; ?>">
    <div class="<?php echo $data['classes']['section_container']; ?>">
        <div class="<?php echo $data['classes']['section_text_center']; ?>">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="<?php echo $data['classes']['section_pretitle']; ?> text-<?php echo $highlightColor; ?>">
                    <?php echo htmlspecialchars($data['section_pretitle']); ?>
                </span>
            <?php endif; ?>
            
            <h2 class="<?php echo $data['classes']['section_title']; ?>">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <p class="<?php echo $data['classes']['section_subtitle']; ?>">
                <?php echo htmlspecialchars($data['section_subtitle']); ?>
            </p>
        </div>
        
        <div class="<?php echo $data['classes']['section_grid']; ?>">
            <?php foreach ($data['items'] as $package): ?>
                <div class="<?php echo $cardClass; ?> <?php echo $data['classes']['animation_pricing_card']; ?>" data-package-id="<?php echo htmlspecialchars($package['id']); ?>">
                    <?php if ($package['recommended']): ?>
                        <div class="<?php echo $data['classes']['label_recommended']; ?> bg-<?php echo $highlightColor; ?> text-white">
                            推荐
                        </div>
                        
                        <?php if (!empty($package['savings'])): ?>
                            <div class="<?php echo $data['classes']['label_savings']; ?>">
                                <?php echo htmlspecialchars($package['savings']); ?>
                            </div>
                        <?php endif; ?>
                    <?php elseif (!empty($package['popularity'])): ?>
                        <div class="<?php echo $data['classes']['label_popularity']; ?>">
                            <?php echo htmlspecialchars($package['popularity']); ?>
                        </div>
                    <?php endif; ?>
                    
                    <div class="flex-grow">
                        <h3 class="<?php echo $data['classes']['card_title']; ?>">
                            <?php echo htmlspecialchars($package['title']); ?>
                        </h3>
                        <p class="<?php echo $data['classes']['card_subtitle']; ?>">
                            <?php echo htmlspecialchars($package['subtitle']); ?>
                        </p>
                        
                        <div class="<?php echo $data['classes']['card_price_container']; ?>">
                            <span class="<?php echo $data['classes']['card_price']; ?>">¥<?php echo number_format($package['price']); ?></span>
                            <span class="<?php echo $data['classes']['card_period']; ?>">/<?php echo htmlspecialchars($package['period']); ?></span>
                        </div>
                        
                        <ul class="<?php echo $data['classes']['card_features_list']; ?>">
                            <?php foreach ($package['features'] as $feature): ?>
                                <li class="<?php echo $data['classes']['card_feature_item']; ?>">
                                    <i class="<?php echo $data['classes']['card_feature_icon']; ?>"></i>
                                    <span class="<?php echo $data['classes']['card_feature_text']; ?>">
                                        <?php echo htmlspecialchars($feature); ?>
                                    </span>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    
                    <div class="<?php echo $data['classes']['card_cta_container']; ?>">
                        <a href="#mobile-form" class="<?php echo $data['classes']['card_cta_button']; ?> 
                            <?php echo $package['recommended'] 
                                ? "bg-{$highlightColor} hover:bg-{$highlightColor}/90" 
                                : "bg-gray-800 hover:bg-gray-900"; ?>">
                            <?php echo htmlspecialchars($data['texts']['select_plan']); ?>
                        </a>
                        
                        <a href="#" class="<?php echo $data['classes']['card_cta_learn_more']; ?> text-<?php echo $highlightColor; ?>">
                            <?php echo htmlspecialchars($data['texts']['learn_more']); ?>
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div class="<?php echo $data['classes']['section_custom_inquiry']; ?>">
            <p class="<?php echo $data['classes']['section_inquiry_text']; ?>">
                <?php echo htmlspecialchars($data['texts']['custom_inquiry']); ?>
                <a href="#mobile-form" class="<?php echo $data['classes']['section_inquiry_link']; ?> text-<?php echo $highlightColor; ?>">
                    <?php echo htmlspecialchars($data['texts']['contact_us']); ?>
                </a>
                <?php echo htmlspecialchars($data['texts']['get_custom_plan']); ?>
            </p>
        </div>
    </div>
</section>

<!-- 定价部分交互脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 价格卡片动画效果
    const pricingCards = document.querySelectorAll('.<?php echo $data['classes']['animation_pricing_card']; ?>');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                // 添加延迟以创建级联效果
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 150);
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    // 初始化卡片样式
    pricingCards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(card);
    });
    
    // 卡片悬停时的特性项动画
    pricingCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            const featureItems = card.querySelectorAll('.<?php echo $data['classes']['card_feature_item']; ?>');
            featureItems.forEach((item, index) => {
                setTimeout(() => {
                    item.querySelector('i').style.opacity = '1';
                    item.querySelector('span').style.opacity = '1';
                }, index * 50);
            });
        });
        
        // 重置动画状态
        card.addEventListener('mouseleave', () => {
            const featureItems = card.querySelectorAll('.<?php echo $data['classes']['card_feature_item']; ?>');
            featureItems.forEach(item => {
                item.querySelector('i').style.opacity = '0.7';
                item.querySelector('span').style.opacity = '0.7';
            });
        });
    });
    
    // 平滑滚动到表单
    document.querySelectorAll('a[href="#mobile-form"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector('#mobile-form');
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
                
                // 高亮显示目标表单
                target.classList.add('<?php echo $data['classes']['animation_form_highlight']; ?>');
                setTimeout(() => {
                    target.classList.remove('<?php echo $data['classes']['animation_form_highlight']; ?>');
                }, 2000);
            }
        });
    });
});
</script>
    